*{box-sizing: border-box;}
body,form,div,span,ul,ol,li,p,pre,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,a,fieldset,legend,address,label,textarea,select,input,figure,table,th,td,b,i{margin:0;padding:0;}
body, button, input, select, textarea{font:0.12rem/1.5 tahoma,arial,'hiragino sans gb','microsoft yahei',sans-serif;}
fieldset,img{border:0;}
ul,li{list-style:none;}
em,i,cite{font-style:normal;}
table{border-collapse:separate;border-spacing:0;}
a{text-decoration:none;}
a:hover{ text-decoration:none;}
a:active{text-decoration:none;}/* 指正在点的链接*/ 
a:visited{text-decoration:none; }/*指已经访问过的链接*/
a:focus,input,button,select,textarea{outline:none; font-size:100%;}
input,select,img{ vertical-align:middle;}
legend{ display:none;}
textarea{resize:none;}
button {cursor:pointer;  border:none;}
/* 1.iOS 长按时不触发系统的菜单 2.禁止长按时下载图片*/
a,button,input,img{-webkit-touch-callout:none;outline:none;-webkit-user-select:none;}
/* 去除点击时产生的半透明灰色背景 */
a,button,input,div{-webkit-tap-highlight-color:rgba(0,0,0,0);}
html,body{font-size: 16px;height:auto}
 .textnoselect
 {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.img-noselect
{
    /* 元素不能成为鼠标事件的target */
    pointer-events:none;
    -webkit-pointer-events:none;
    -ms-pointer-events:none;
    -moz-pointer-events:none;
}


.icon,
.works li .job .time,
.info .contact .erwe-wrapper:before
{
    background-image: url(../img/iconpc.png);
    background-image: -webkit-image-set(url(../img/iconpc.png) 1x,url(../img/iconpc@2x.png) 2x);
    background-repeat: no-repeat;
}
.head-sculpture{
    background-image: url(../img/headsculpture.png);
    background-image: -webkit-image-set(url(../img/headsculpture.png) 1x,url(../img/headsculpture@2x.png) 2x);
    background-repeat: no-repeat;
}


/* info */
.info{position: relative;width: 100%;}
.info .bg-wrapper{background: #E95514;position: absolute;width: 100%;height: 100%;z-index: 0;overflow: hidden;top: 0;}
.info .bg-wrapper span{display: block;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;background-size: cover;background-position: center top;background-repeat: no-repeat;display: none;}
.info .bg-wrapper .bg-1{z-index: 4;background-image: url(../img/infobg-1.png);}
.info .bg-wrapper .bg-2{z-index: 3;background-image: url(../img/infobg-2.png);}
.info .bg-wrapper .bg-3{z-index: 2;background-image: url(../img/infobg-3.png);}
.info .bg-wrapper .bg-4{z-index: 1;background-image: url(../img/infobg-4.png);}

@keyframes move_wave {
     0% {
         transform: translateX(0) translateZ(0) scaleY(1)
     }
     25% {
         transform: translateX(-25%) translateZ(0) scaleY(0.55)
     }
     50% {
         transform: translateX(-50%) translateZ(0) scaleY(1)
     }
     75% {
         transform: translateX(-25%) translateZ(0) scaleY(1)
     }
     100% {
      transform: translateX(0%) translateZ(0) scaleY(1)
  }
 }
 .wave-wrapper {
     overflow: hidden;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     margin: auto;
     z-index: 1;
 }
 .waveWrapperInner {
     position: absolute;
     width: 100%;
     overflow: hidden;
     height: 100%;
     bottom: -1px;
 }
 .bgTop {
     z-index: 15;
     opacity: 0.5;
 }
 .bgMiddle {
     z-index: 10;
     opacity: 0.75;
 }
 .bgBottom {
     z-index: 5;
 }
 .wave {
     position: absolute;
     left: 0;
     width: 200%;
     height: 100%;
     background-repeat: repeat no-repeat;
     background-position: 0 bottom;
     transform-origin: center bottom;
 }
 .waveTop {
     background-size: auto 30px;
     background-image: url('../img/wave-top.png');
 }
 .waveAnimation .waveTop {
   animation: move-wave 6s infinite;
    -webkit-animation: move-wave 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
 }
 .waveMiddle {
     background-size: auto 70px;
     background-image: url('../img/wave-mid.png');
 }
 .waveAnimation .waveMiddle {
     animation: move_wave 20s linear infinite;
 }
 .waveBottom {
     background-size: auto 50px;
     background-image: url('../img/wave-bot.png');
 }
 .waveAnimation .waveBottom {
     animation: move_wave 30s linear infinite;
 }
  

 .info .content-wrapper{width: 100%;margin: 0 auto;position: relative;z-index: 2;padding: 15px 4vw 50px;}
 .info .content-wrapper .name{display: flex;align-items: flex-end;}
 .info .content-wrapper .name h1{font-size: 55px;color: #fff;flex: 0 0 110px;height: 83px;line-height: 100px;display: inline-block;}
 .info .content-wrapper .name .desc{padding-left: 15px;flex: 1;display: inline-block;}
 .info .content-wrapper .name .desc span{display: block;color: #CBCBCB;font-size: 16px;}
 .info .content-wrapper .name .desc small{display: block;color:#72150E;font-size: 20px;font-weight: 700;}

 .info .contact{margin-top: 15px;position: relative;width: 100%;border-bottom: 1px solid #8E1714;padding-bottom: 15px;}
 .info .contact ol{display: flex;justify-content: flex-start;flex-flow: wrap;width: 100%;}
 .info .contact li{min-width: 150px;display: flex;}
 .info .contact li#icon-erwexin:active{color: rgb(150, 50, 39);}
 .info .contact li.active .icon-erwexin{background-position: -162px 3px}
 .info .contact li:first-child{margin-left: 0;}
 .info .contact li .icon{width: 30px;height: 30px;display: inline-block;}
 .info .contact li .icon-phone{background-position: 4px 3px;}
 .info .contact li .icon-email{background-position: -26px 3px;}
 .info .contact li .icon-qq{background-position: -64px 3px;}
 .info .contact li .icon-wexin{background-position: -97px 3px;}
 .info .contact li .icon-erwexin{background-position: -133px 3px;}
 .info .contact li .icon-erclose{background-position:-163px 3px;}
 .info .contact li span{height: 30px;line-height: 30px;color: #fff;display: inline-block;font-size: 15px;}


 .info .myinfo{padding: 5px 0;}
 .info .myinfo li{overflow: hidden;font-size: 16px;display: flex;flex-flow: wrap;padding:2px 0}
 .info .myinfo li .item{width: 100%;padding: 2px 0;}
 .info .myinfo .title{color:#FEFF9F;flex: 0 0 80px;margin-bottom: 10px;}
 .info .myinfo .text{color:#fff;overflow: hidden;flex: 1;margin-bottom: 10px;}

.info .myinfo .school>.text p{line-height: 28px;display: flex;flex-flow: wrap;margin-bottom: 5px;}
.info .myinfo .school>.text p span{display: inline-block;color: #72150E;font-weight: 700;}
.info .myinfo .school>.text p .school-name{width: 100%;display: block;color: #fff;}
.info .myinfo .school>.text p .school-desc{flex: 0 0 140px ;}
.info .myinfo .school>.text p .school-time{flex:1}
.info .myinfo .school>.text p .school-check{color: #a9e1fc;display: block;width: 50%;font-size: 16px;color: #efd708;}
.info .myinfo .school>.text p .school-check:active{color: #72150E;}

.info .myinfo .certificate>.text span{padding-right: 10px;}
.info .myinfo .trait>.text{width: 700px;line-height: 28px;}

.info .myinfo .certificate .gaoxiang{
    color: #efd708;
    font-weight: bold;
    cursor: pointer;
}


/* nav */
.nav{width: 65vw;position: fixed;z-index: 101;left: 0;top: 0;bottom: 0;transform: translate3d(-100%,0,0);padding-right: 10px;transition: all 0.5s;}
.nav.moveIn{transform: translate3d(0%,0,0)}
.nav .content-wrapper{position: relative;height: 100vh;padding-top: 8vh;background: #f5f5f5;width: 50vw;}
.nav .head-sculpture{width: 110px;height: 110px;background-size: auto 100%;position: relative;left: 30vw;margin-bottom: 5px;}

.nav .nav-list-wrapper{position: relative;width: 100%;margin-top: 10px;}

.nav .nav-list li{width: 100%;height: 50px;line-height: 50px;text-align: right;cursor: pointer;transition: all 0.4s;font-size: 16px;padding-right: 20px;}
.nav .nav-list li.active{color: #E95514;border-right: 5px solid #E95514;background-color: #E5E5E5;font-weight: 700;padding-right: 30px;}

.nav .m-contact-me{text-align: right;font-size: 14px;padding-right: 10px;}
.nav .m-contact-me .icon{display: inline-block;height: 20px;width: 20px;background-size: 150px;}
.nav .m-contact-me .icon-qq{background-position: -50px -49px;}
.nav .m-contact-me .icon-email{background-position: -22px -49px;}
.nav .m-contact-me .text{display: inline-block;height: 20px;line-height: 20px;vertical-align: top;}
.nav .m-contact-me .name{font-size: 18px;height: 30px;line-height: 30px;}
.nav .m-contact-me .callme{display: flex;justify-content: flex-end;padding-top: 5px;}
.nav .m-contact-me .callme a, .nav .m-contact-me .callme span{display: inline-block;height: 30px;padding: 0 7px;font-size: 16px;}
.nav .m-contact-me .callme a{color:#E95514}
.nav .m-contact-me .callme span{color: #54C12B;}



/* cover */
#cover{width: 100%;height: 100%;background: rgba(7,17,27,.9);position: fixed;top:0;bottom: 0;left: 0;right: 0;z-index: 100;display: none;}

/* 二维码 */
.erwe-wrapper{width: 100%;background: rgba(0, 0, 0, .8);padding: 10px;border-radius: 0 0 10px 10px;position: fixed;right: 0px;top: 0px;display: block;z-index: 110;transition: all 0.4s;transform: translate3d(0,-101%, 0);}
.erwe-wrapper img{width: 50%;margin: 0 auto;display: block;}
.erwe-wrapper p{color:#fff;text-align: center;font-size: 16px;}
.erwe-wrapper.moveIn{transform: translate3d(0,0,0);}
.erwe-wrapper .icon{display: block;position: absolute;right: 15px; top: 15px;width: 30px;height: 30px;}
.erwe-wrapper .icon-close-white{background-position: -31px -27px;}

/* 菜单 */
.navbtn{width: 40px;height: 40px;position: fixed;z-index: 101;right: 4vw;top: 15px;background: #fff;border-radius: 50%;display: flex;justify-content: center;align-items: center;flex-flow: wrap;align-content:center;box-shadow: 0px 6px 7px rgba(0, 0, 0, .6);}
.navbtn span{display: block;width: 24px;height: 3px;background-color: #4d4d4d;border-radius: 5px;margin-bottom: 5px;}
.navbtn span:last-child{margin-bottom: 0;}
@keyframes navlinegrow{
    0%{
        width: 24px;
    }
    50%{
        width: 28px;
    }
    100%{
        width: 24px;
    }
}
.navbtn.m-nav-normal span{animation-name: navlinegrow;animation-iteration-count: infinite;}
.navbtn.m-nav-normal .line-top{animation-duration: 1.2s;}
.navbtn.m-nav-normal .line-mid{animation-duration: 1s;animation-delay: 0.5s;}
.navbtn.m-nav-normal .line-bot{animation-duration: 1.2s;animation-delay: 0.3s;}

@keyframes navlineclose-top{
    0%{
        transform: rotate(0deg);
        left: 0;
    }
    100%{
        transform: rotate(45deg);
        left: 3px;
    }
}
@keyframes navlineclose-mid{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes navlineclose-bot{
    0%{
        transform: rotate(0deg);
        left: 0;
    }
    100%{
        transform: rotate(-45deg);
        left: 3px;
    }
}
.navbtn.m-nav-close span{animation: navlineclose 1s both;position: relative;margin-left: 3px;}
.navbtn.m-nav-close .line-top{
    animation: navlineclose-top 0.6s both;
    transform-origin: left top;
}
.navbtn.m-nav-close .line-mid{animation: navlineclose-mid 0.6s both;}
.navbtn.m-nav-close .line-bot{
    animation: navlineclose-bot 0.6s both;
    transform-origin: left bottom;
}

@keyframes navlinenormal-top{
    0%{
        transform: rotate(45deg);
        left: 3px;
    }
    100%{
        transform: rotate(0deg);
        left: 0;
    }
}
@keyframes navlinenormal-mid{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes navlinenormal-bot{
    0%{
        transform: rotate(-45deg);
        left: 3px;
    }
    100%{
        transform: rotate(0deg);
        left: 0;
    }
}
.navbtn.m-nav-gonormal span{animation: navlineclose 1s both;position: relative;}
.navbtn.m-nav-gonormal .line-top{
    animation: navlinenormal-top 0.6s both;
    transform-origin: left top;
}
.navbtn.m-nav-gonormal .line-mid{animation: navlinenormal-mid 0.6s both;}
.navbtn.m-nav-gonormal .line-bot{
    animation: navlinenormal-bot 0.6s both;
    transform-origin: left bottom;
}
/* 菜单 end */

/* headline */
.headline{width: 100%;margin: 0 auto;position: relative;padding: 20px 0;}
.headline .mid-title{width: 200px;margin: 0 auto;background: #fff;}
.headline .mid-title h3{color: #E95514;font-weight: 700;font-size: 28px;text-align: center;}
.headline .mid-title small{color: #BFBFBF;font-size: 12px;display: block;text-align: center;}
.headline .line{display: block;width: 100%;height: 1px;border-bottom: 1px dashed #D8D8D8;position: absolute;left: 0;top: 50%;z-index: -1;}

/* works */
.works{width: 100%;padding-bottom: 15px;overflow-x: hidden;}
.works .works-wrapper{width: 100%;position: relative;padding: 0 4vw 0 6vw;}
.works .works-wrapper:before{content: "";position: absolute;width: 1px;height: 100%;border-left: 1px solid #D8D8D8;left: 6vw;}

.works li{position: relative;width: 100%;padding: 0px 0 0px 25px;margin-bottom: 25px;}
.works li:last-child{margin-bottom: 0;}
.works li .spot{position: absolute;width: 26px;height: 26px;left: 0%;margin-left: -13px;top: 12px;z-index: 1;}
.works li .spot .icon{width: 26px;height: 26px;background-position: 1px -82px;display: block;background-size: 130px;}
.works li .desc{width: 100%;line-height: 34px;background: #fff;color: #767676;}
.works li .company{font-size: 18px;padding: 10px 0 5px;}
.works li .job{width: 100%;margin-bottom: 10px;}
.works li .job span{display: block;}
.works li .job .time{height: 48px;font-size: 20px;font-weight: 700;color: #4d4d4d;line-height: 50px;background-position:0 -157px;background-size: 180px;padding-left: 28px;}
.works li .job .jobdo{overflow: hidden;display: flex;align-items: center;}
.works li .job .jobdo .icon{width: 20px;height: 20px;display: inline-block}
.works li .job .jobdo .icon-point{background-position: -48px -136px;display: inline-block}
.works li .job .jobdo em{height: 30px;line-height: 30px;color: #E95514;font-weight: 700;font-size: 18px;}
.works li.endnow .spot:before{display: none;}
.works li.endnow .today{display: block;height: 50px;line-height: 50px;font-size: 18px;font-weight: 700;background-color: #a9e1fc;background-image: none;width: 150px;color: #fff;text-align: center;border-radius: 10px;position: relative;margin-left: 15px;}
.works li.endnow .today::before{content: "";position: absolute;width: 0;height: 0;border-top: 10px solid transparent;border-right: 20px solid #a9e1fc;border-bottom: 10px solid transparent;left: -16px;top: 15px;}

/* skill */
.skill{width: 100%;margin: 0 auto;overflow: hidden;}
.skill .skill-wrapper{margin: -5px auto 0;width: 100%;padding: 0 4vw;}
.skill .code-wrapper{width: 100%;margin-bottom: 30px;}
.skill .design-wrapper{width: 100%;}
.skill .head{overflow: hidden;;}
.skill .head span{float: left;font-size: 20px;font-weight: 700;border-left: 8px solid #E95514;padding-left: 8px;height: 30px;line-height: 30px;}
.skill .head em{float: right;font-size: 14px;color: #B5B4B4;height: 30px;line-height: 30px;}

.skill .desc{overflow: hidden;display: flex;background-color: #f7f7f7;border-radius: 20px;padding: 10px;}
.skill .desc .icon{width: 30px;height: 30px;flex: 0 0 30px;}
.skill .desc .icon-sarrow{background-position: -75px -131px;}
.skill .desc .text{line-height: 30px;flex: 1;padding-left: 10px;}

.skill .skill-progress{margin: 10px 0 15px;width: 100%;}
.skill .skill-progress .item{overflow: hidden;height: 40px;display: flex;align-items: center;}
.skill .skill-progress .item .label,
.skill .skill-progress .item .percent
{height: 40px;line-height: 40px;display: inline-block;}
.skill .skill-progress .item .label{text-align: right;padding-right: 15px;flex: 0 0 70px;}
.skill .skill-progress .item .progress{height: 16px;background-color: blue;border-radius: 10px;display: inline-block;box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);}
.skill .skill-progress .item .percent{text-align: center;padding-left: 10px;font-size: 14px;flex: 0 0 50px;}
.php-wrapper{
    margin-top: 20px;
    padding: 0 4%;
}
.php-wrapper .head{
    margin-bottom: 15px;
}
.php-skill-li{
    padding: 0px 0 15px 35px;
    background-image: url(../img/sure.png);
    background-image: -webkit-image-set(url(../img/sure.png) 1x,url(../img/sure@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: left top;
}
.php-skill-li b{
    color: #E95514;
    font-weight: 700;
    padding: 0 3px;
}

.tips{
    width: 92vw;
    margin: 10px auto 0;
    background-color: #f4f5f5;
    padding: 15px 10px;
    border-left: 5px solid #E95514;
}
.tips b{color: #425583;font-weight: 700;}
.tips p{
    font-size: 14px;
    line-height: 24px;
}

/* afterend */
.afterend{
    margin: 30px auto 0;
    width: 100%;
}
.afterend-works{
    overflow: hidden;
    padding: 0 4%;
}
.afterend-list{
    margin-top: 10px;
    font-size: 0;
    width: 100%;
}
.afterend-list li{
    width: 100%;
    margin-bottom: 20px;
}
.afterend-list li a,
.afterend-list li em{
    display: block;
    overflow: hidden;
    user-select: none;
}
.afterend-list li .imgbox{
    height: 205px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}
.afterend-list .imgbox .link-see{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(../img/bg-black.png);
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 205px;
    transition: all 0.4s;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
.afterend-list .imgbox .link-see span{
    color: #fff;
    border-radius: 10px;
    border: 2px solid #fff;
    font-size: 16px;
    padding: 15px 36px;
}
.afterend-list li img{
    display: block;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    transition: all 0.5s;
}
.afterend-list li .imgbox:active .link-see{
    visibility: visible;
    opacity: 1;
}
.afterend-list li .title{
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    line-height: 30px;
}
.afterend .all {
    width: 300px;
    background: #fff;
    color: #E95514;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    font-weight: 700;
    border-radius: 20px;
    margin: 40px auto 0;
    border: 1px solid #E95514;
    transition: all 0.5s;
    cursor: pointer;
}
.afterend-list .info-item{
    font-size: 14px;
    padding: 15px 0;
    color: #6f6f6f;
    border-radius: 5px;
}
.afterend-list .info-item h3{
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}
.afterend-list .info-item p{
    line-height: 22px;
}
.afterend-list .info-item .goto{
    color:#14a0e9;
    text-align: justify;
    display: block;
    font-size: 0;
    margin-top: 10px;
    transition: color .4s;
}
.afterend-list .info-item .goto:hover{
    color: #0d6592;
}
.afterend-list .info-item .goto span,
.afterend-list .info-item .goto small{
    display: inline-block;
    font-size: 14px;
}
.afterend-list .info-item .goto:after{
    content: "";
    display: inline-block;
    width: 100%;
}
.afterend .all:hover {
    border-color: #fff;
    background: #E95514;
    color: #fff;
    font-size: 26px;
}
.afterend-list.hide{
    display: none;
}
#afterend-lookall{display: none;}

/* Frontend */
.linkto{display: block;}
.Frontend{margin: 30px auto 0;width: 100%;}
.Frontend .tabs-bar{margin: 10px auto 15px;display: flex;flex-flow: wrap;padding: 0 4vw;justify-content:center}
.Frontend .tabs-bar span{line-height: 40px;border: 1px solid #bfbfbf;color: #BFBFBF;cursor: pointer;border-radius: 5px;width: 28vw;margin-bottom: 10px;text-align: center;margin: 0 1vw 10px 0;}
.Frontend .tabs-bar span.active{border: 1px solid #E95514;color: #fff;background: #E95514;}

.Frontend .tabs-content{padding: 0 4vw;overflow: hidden;}
.Frontend .hrefstop-hook{position: relative;}
.Frontend .detail .imgbox{width: 100%;}
.Frontend .detail .imgbox .work-pic{width: 100%;}
.Frontend .detail .name{text-align: center;color: #4d4d4d;height: 40px;line-height: 40px;}

.Frontend .detail .QRcode{position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, .8);display: block;top: 0;left: 0;right: 0;}
.Frontend .detail .QRcode .work-qr{display: block;width: 120px;margin: 30px auto 10px;background: #fff;border-radius: 10px;padding: 3px;}
.Frontend .detail .QRcode .work-qr img{width: 100%;display: block;}
.Frontend .detail .QRcode .text{display: block;text-align: center;color: #D8D8D8;font-size: 14px;}
.Frontend .detail .QRcode .close{right: 0;left: auto;}

.Frontend .swiper-container{position: relative;}
.Frontend .swiper-container .arrow{width: 40px;height: 40px;position: absolute;top: 50%;display: block;margin-top: -40px;z-index: 90;}
.Frontend .swiper-container .icon-code-left{background: url(../img/code-left.png) no-repeat;background-size: contain;left: 10px;animation: moveLeft 1.2s infinite alternate linear;}
.Frontend .swiper-container .icon-code-right{background: url(../img/code-right.png) no-repeat;background-size: contain;right: 10px;animation: moveRight 1.2s infinite alternate linear;}
.Frontend .swiper-container .arrow.alpha{animation: opacityzero 0.4s both;}
@keyframes opacityzero{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes moveLeft{
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(-10px, 0) scale(0.95);
    }
}
@keyframes moveRight{
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(10px, 0) scale(0.95);
    }
}
.Frontend .all{width: 60vw;background: #E95514;color: #fff;text-align: center;height: 50px;line-height: 50px;font-size: 18px;border-radius: 20px;margin: 20px auto 0;}
.Frontend .all:active{background: rgb(190, 69, 17);}


.Frontend .pagination {
    position: absolute;
    left: 0;
    text-align: center;
    bottom:44px;
    width: 100%;
  }
.Frontend .swiper-pagination-switch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 1px 2px #555 inset;
    margin: 0 3px;
    transition: all 0.4s;
  }
.Frontend .swiper-active-switch {
    background: #ffeb3b;
    width: 30px;
  }


/* webshow */
.all-webworks{position: fixed;width: 100%;height: 100%;z-index: 101;top: 0;left: 0;right: 0;background: rgba(7,17,27,.9);backdrop-filter: blur(5px);display: none;}
.all-webworks .all-webworks-wrapper{width: 90vw;margin: 5vh auto;position: relative;}
.all-webworks .all-webworks-wrapper::after{content: "";position: absolute;width: 100%;height: 30px;width:30px;background: url(../img/arrow-down.png) no-repeat center bottom;bottom: 10px;background-size: contain;left: 50%;margin-left: -15px;animation: arrowDown 1s both infinite;}
@keyframes arrowDown{
    0%{
        opacity: 1;
        transform: translate(0,0);
    }
    100%{
        opacity: 0;
        transform: translate(0, 10px);
    }
}
.all-webworks .all-webworks-inner{overflow-x: hidden;width: 100%;height: 80vh;overflow-y: scroll;-webkit-overflow-scrolling: touch}
.all-webworks .works-list{width: 100%;overflow: hidden;display: flex;justify-content: space-between;flex-flow: wrap;}
.all-webworks .works-list li{width: 48%;margin-bottom: 10px;}
.all-webworks .works-list li .linkto{width: 100%;display: block;}
.all-webworks .works-list li .linkto.active .name{color: #E95514;}
.all-webworks .works-list li .linkto.active .allwork-pic{transform: scale(1.2);}
.all-webworks .works-list li .imgbox{display: block;position: relative;width: 100%;overflow: hidden;}
.all-webworks .works-list li .imgbox img{width: 100%;height: 100%;transition: all 0.4s;}
.all-webworks .works-list li .QRcode{position: absolute;width: 100%;height: 100%;background: rgba(0, 0, 0, .6);display: block;top: 0;left: 0;right: 0;display: none;}
.all-webworks .works-list li .QRcode .work-qr{display: block;height: 86px;;background: #fff;border-radius: 10px;padding: 3px;}
.all-webworks .works-list li .QRcode .work-qr img{width: 80px;height: auto;display: block;}
.all-webworks .works-list li .QRcode .text{display: block;text-align: center;color: #D8D8D8;font-size: 14px;}
.all-webworks .works-list li .name{width: 100%;color: #fff;text-align: center;height: 40px;line-height: 40px;font-size: 12px;overflow: hidden;}
.all-webworks .works-list.qrshow .QRcode{display: flex;justify-content: center;flex-flow: wrap;align-items: center;}
.all-webworks .works-list.qrshow .QRcode .text{display: none;}

.works-in-headline{width: 100%;font-size: 28px;position: relative;margin-bottom: 10px;}
.works-in-headline:before,
.works-in-headline:after
{content: "";position: absolute;width: 30%;height: 1px;border-bottom: 1px solid #d8d8d8;top: 50%;}
.works-in-headline:before{left: 0;}
.works-in-headline:after{right: 0;}
.works-in-headline span{display: block;color: #E95514;font-weight: 700;text-align: center;}
.works-in-headline small{display: block;text-align: center;color: #D8D8D8;font-size: 10px;}

/* design */
.design{margin: 40px auto 0px;width: 100%;padding: 0 0vw 0px;}
#gallery-wrapper{position: relative;width: 100%;margin:0 auto 50px;}
#gallery-wrapper img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
}
#gallery-wrapper .pin{
    padding: 10px 5px;
    float:left;
    width: 50%;
    animation: pinfadeIn 3s both;
}
@keyframes pinfadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
#gallery-wrapper .box {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    padding: 10px;
    cursor: pointer;
}
#gallery-wrapper .box h1 {
    font-size: 16px;
    color: #A92733;
    padding: 5px 0;
}
#gallery-wrapper .box p{
    color: #9e9e9e;
    font-size: 14px;
    line-height: 24px;
}
#gallery-wrapper .box:active {
    opacity: 0.5;
}

.design .gallery-end{width: 100%;color: #bfbfbf;position: relative;z-index: 1;margin: 0 auto;background-color: #fff;margin-bottom: 30px;display: none;text-align: center;}
.design .gallery-end p{background-color: #fff;text-align: center;font-size: 12px;display: inline-block;padding: 0 5px;}
.design .gallery-end::after{content: "";width: 100%;height: 1px;border-bottom: 1px dashed #bfbfbf;position: absolute;top: 50%;left: 0;z-index: -1;}


/* footer */
.footer{width: 100%;background: #4c4c4c;text-align: center;color: #fff;font-size: 14px;padding: 10px 0;display: none;}
.footer em{display: block;line-height: 30px;}

/* gotop */
a#go-top{position: fixed;background-color: #E95514;width: 44px;height: 44px;text-indent: -999em;border-radius: 10px;background-position: -109px -18px;display: block;background-size: 160px;z-index: 91;}
a#go-top:active{background-color: #b54210}

/* design-works */
.design-works{position: fixed;width: 100%;height: 100%;z-index: 201;top: 0;left: 0;right: 0;background: rgba(7,17,27,.9);backdrop-filter: blur(5px);overflow: auto;align-items: center;display: none;}
.design-works .design-works-wrapper{width: 96vw;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.design-works .design-swiper{width: 100%;margin: 0 auto;position: relative;}
.design-works .design-swiper.onlyone .icon,
.design-works .design-swiper.onlyone .design-pagination
{display: none;}
.design-works .design-swiper>.icon{width: 30px;height: 60px;display: block;position: absolute;top: 50%;margin-top: -30px;cursor: pointer;z-index: 10;background-size: 150px;}
.design-works .design-swiper>.icon-design-left{background-position: -50px -232px;left: 10px;animation: moveleft 1.5s both infinite;}
.design-works .design-swiper>.icon-design-right{
background-position:-114px -232px;right: 10px;animation: moveright 1.5s both infinite;}
@keyframes moveleft{
    0%{
        transform: translate(0, 0);
        opacity: 1;
    }
    100%{
        transform: translate(-20px, 0);
        opacity: 0;
    }
}
@keyframes moveright{
    0%{
        transform: translate(0, 0);
        opacity: 1;
    }
    100%{
        transform: translate(20px, 0);
        opacity: 0;
    }
}
.design-works .swiper-container{height: 255px;overflow: hidden;width: 100%;margin: auto;position: relative;}
.design-works .swiper-slide{display: flex;align-items: center;justify-content: center;height: 255px;width: 100%;overflow: hidden;background: url(../img/loading.gif) no-repeat center center;background-size: 30px auto;}
.design-works .swiper-slide img{display: block;}
.design-works .swiper-slide img.imgis-horizontal{width: 99.5%;height: auto;}
.design-works .swiper-slide img.imgis-vertical{height: 100%;width: auto;}
.design-works .design-pagination {
    position: absolute;
    left: 0;
    text-align: center;
    bottom:0px;
    width: 100%;
    z-index: 80;
  }
.design-works .swiper-pagination-switch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 1px 2px #555 inset;
    margin: 0 3px;
    cursor: pointer;
    transition: all 0.3s;
  }
.design-works .swiper-active-switch {
    background: #ffeb3b;
    width: 30px;
  }
.design-works h1{font-size: 20px;text-align: center;font-weight: 700;color: #ffc107;width: 100%;margin: 30px auto 15px;}
.design-works h1 span{position: relative;display: inline-block;height: 40px;line-height: 40px;}
.design-works h1 span:before{content: "";position: absolute;width: 5px;height: 100%;background: #b62a2a;left: -20px;}
.design-works h1 span:after{content: "";position: absolute;width: 5px;height: 100%;background: #b62a2a;right: -20px;}
.design-works .desc{color: #fff;width: 100%;margin: 10px auto 0;border-top: 1px dashed #686767;padding: 15px 0;font-size: 14px;}
.design-works .tips{font-size: 14px;text-align: center;margin-top: 2px;}
.design-works .tips p:first-child{color: #FEFF9F;font-size: 14px;padding: 5px 0;}
.design-works .works-in-headline small{font-size: 14px;margin-top: 2px;}
.design-works .works-in-headline:before, .design-works .works-in-headline:after{top: 34%;}

.close{position: absolute;display: block;width: 36px;height: 36px;background-position: -21px -19px;left: 0;top: 0;background-color: rgba(0, 0, 0, .4);background-size: 170px;z-index: 80;}


.works-headline{border-left: 5px solid #E95514;padding-left: 15px;width: 100%;font-size: 18px;font-weight: 700;color: #fff;height: 24px;line-height: 24px;color: #fff;margin-bottom:10px;position: relative;}
.works-headline:after{position: absolute;right: 0;display: block;height: 24px;line-height: 24px;font-size: 12px;top: 0;color: #aaa;}
.works-headline:after{content: "折叠";}
.works-headline.fold:after{content: "展开";}

.bigimg{position: fixed;background: rgba(7,17,27,1);width: 100%;height: 100%;z-index: 300;top: 0;left: 0;right: 0;bottom: 0;overflow: auto;display: none;}
.bigimg .biginner{display: flex;align-items: center;justify-content: center;position: absolute;width: 100%;height: 100%;-webkit-overflow-scrolling: touch;overflow: auto;background: url(../img/loading.gif) no-repeat center center;background-size: 30px auto;}
.bigimg .bigcloser{position: absolute;top: 0;left: 0;z-index: 201;background-color: rgba(0, 0, 0, .8);}
.bigimg .bigcloser .icon{display: block;width: 40px;height: 40px;}
.bigimg .bigcloser .icon-close-white{background-position: -26px -23px;}
.bigimg img{width: 100%;height: auto; margin: auto;}


.check-school{width: 100%;height: 100%;position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 201;display: none;background: rgba(7,17,27,.9);}
.check-school .check-school-img{width: 90%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background: url(../img/loading.gif) no-repeat center center;background-size: 36px 36px;min-height: 50vh;}
.check-school .check-school-img img{width: 100%;}

.img-alert{
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    background: url('../img/loading-pc.gif') no-repeat center center;
}
.img-alert img{
    display: block;
    width: 100%;
}

.hide{display: none;}

.nav .pc-contact-me,
.nav .bot-line,
.Frontend .detail .QRcode,
.info .contact li.downloadJL
{display: none;}